iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 7
4

一路上感謝各位讀者們的支持和回饋。
本 30 天系列文目前已經將篇幅重新整理、編纂成冊。
《JavaScript 概念三明治》在天瓏書局上架囉!
喜歡這個系列,想閱讀更詳細原理說明的讀者可以參考:
https://www.tenlong.com.tw/products/9789864347575

這很基本,不過為了了解後面的說明,還是要提一下,JavaScript 有兩種語法分類:陳述式與表達式。而了解這兩種語法分類之後,後半段會提到,JavaScript 基於這些觀念,在函式宣告上具有獨特不同的運作方式。

Outline

  • 陳述式( Statement )
  • 表達式 ( Expression )
  • Expression Statements
  • 函式陳述式 (Function Statement)
  • 函式表達式 (Function Expression)

陳述式( Statement )

陳述式一定會做一些事情,但陳述式不會產生數值。所以不能被放在 JS 內預期會產生數值的地方,例如函式的參數、函式的回傳值、或是宣告變數時等號的右邊(不能分配給另一變數)。

陳述式會產生動作

下面這些都是 JavaScritp 裡的陳述式:

  1. if 判斷式

  2. while 迴圈

  3. for 迴圈

  4. switch 判斷是

  5. for-in 迴圈

  6. 直接的函式宣告

  7. 變數宣告

    var a = 3 ;

    if(a === 3){
    //doSomeThing...
    }

    {
    //doSomeThing , this is a Block Statement
    }

    for (var i = 0 ; i<=10 ; i++ ){
    //doSomeThing
    }

    try{
    ...
    }catch (){
    ...
    }

上面這些例子都是陳述式,會執行某些動作。值得注意的是區塊陳述 ( Block Statement ),就像 if 的區塊一樣,在裡面會執行一些動作,但執行完成後也不會回傳任何數值,區塊陳述也是一樣的概念,只是一定會執行,不會經過判斷。

另外,變數的宣告為什麼是陳述式?他會做什麼動作嗎?會的,JS 引擎在這個時候會幫你留一個記憶體空間,並把這個變數名稱跟記憶體空間做連結,函式宣告也是一樣的道理,等等就可以看到。

表達式 ( Expression )

表達式是一段可以很長,但會產生結果值的程式碼,而且很常是運算式。

An expression is a phrase of JavaScript that a JavaScript interpreter can evaluate to produce a value. - JavaScript: The Definitive Guide

表達式是一段 JS 直譯器能夠運算並產生數值的程式碼。

1 + 2

functionInvocation()

ture || false d

true && true

a = 3  //會回傳 3 

a === 3

Array.isArray([]) ? doSomeThing() : doOtherThing()  

上面這些用法都是表達式,我們應該都用習慣了,但是如果沒有特別注意就不會特地去分類。好,現在我們知道陳述式會執行動作、表達式會回傳某值,接下來我們要看看比較特別的部分。JS的函式宣告,根據不同的方式可以是宣告式也可以是表達式函式,這兩種方法則分別稱為「函式陳述式」跟「函式表達式」。

函式陳述式( Function Statement )

函式陳述式是藉由直接給定名字來直接宣告一個函式。剛剛有說到變數宣告會使 JS 引擎來幫你保留記憶體空間,所以是陳述式。像這樣子直接的函式宣告,跟變數宣告會產生的行為是一樣的,差別是整個函式內容在語法解析階段都會保留進記憶體空間,這個行為就是之前提到的提升 ( Hoisting ),所以屬於函式的陳述式。

function functionStatement (){
	//doSomething 
} 

函式表達式 ( Function Expression )

另外一種宣告函式的方式是函式表達式,是把一個匿名函式指派給一個變數,這種宣告方式的函式內容不會在一開始就被提升,會被提升的只有該變數而已。在執行階段,才會把函式內容指派給變數,以下面程式碼為例,這個時候 functionExporession 才是一個可以用的函式,而變數的指派屬於表達式,因此這種方式也被稱為函式表達式。

var functionExpression = function(){
	//doSomeThing
}

上一篇
JS 原力覺醒 Day06 - 提升 Hoisting
下一篇
JS 原力覺醒 Day08 - Closures
系列文
JavaScript 原力覺醒 - 成為絕地武士之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言